<template>
  <div id="chat-view">
    <Topnav
      @showQuick="showQuick"
      @showNotice="showNotice"
      :currentStyle="currentStyle"
    />
    <div class="line">
      <Notice v-show="isShow" />
      <Quick v-show="!isShow" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Topnav from "./components/Topnav.vue";
import Notice from "./components/Notice.vue";
import Quick from "./components/Quick_chat.vue";
import { ref } from "vue";

const isShow = ref(false);
const currentStyle = ref("微聊");
const showQuick = () => {
  isShow.value = false;
  currentStyle.value = "微聊";
};
const showNotice = () => {
  isShow.value = true;
  currentStyle.value = "通知";
};
</script>

<style lang="scss" scoped>
#chat-view {
  overflow: hidden;
  height: calc(100vh - 50px);
  background: radial-gradient(
    circle at 49.67% 94.33%,
    #f5f5f5 41.28%,
    #daf9f2 100%
  );
}

.line {
  width: 90%;
  height: 600px;
  margin: 20px auto;
}
</style>   